<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BTC区块交易信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/css.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
		<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://code.highcharts.com/highcharts.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a href="javascript:history.back();"><i class="iconfont fanhui">&#xe6a3;</i></a>
		    <h1 class="mui-title">BTC区块交易信息</h1>
		</header>
		<div class="mui-content">
			
			<div class="jyxinxi-content">
				<p class="jiagehangq">
					价格行情
				</p>
				<input type="button" name="" id="" value="K币行情" class="kbhangqing"/>
				<div id="container" style="width: 100%; height: 300px; margin: 0 auto"></div>
			</div>
			<div class="jyxinxi-nr">
				<ul>
					<li class="jyxinxi-li01 color-jyxx">全部</li>
					<li class="jyxinxi-li02">转入</li>
					<li class="jyxinxi-li03">转出</li>
				</ul>
			</div>
			<div class="hangqing-gneng">
				<ul>
					<li>
						<div class="tijiao fasjs1">
							<p>
				    	 		<span class="tijiao-img"><img src="img/fs.png"/></span>
				    			<span>发送</span>
				    	 	</p>
			    	 	</div>
					</li>
					<li>
						<div class="tijiao fasjs2">
							<p>
				    	 		<span class="tijiao-img"><img src="img/js.png"/></span>
				    			<span>接收</span>
				    	 	</p>
			    	 	</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script language="JavaScript">
			$(document).ready(function() {  
			   var chart = {
			      type: 'area'
			   };
			   var title = {
			      text: ''   
			   };
			   var subtitle = {
			      text: ''  
			   };
			   var xAxis = {
			      allowDecimals: false,
			      labels: {
			         formatter: function () {
			            return this.value; // clean, unformatted number for year
			         }
			      }
			   };
			   var yAxis = {
			      title: {
			         text: ''
			      },
			      labels: {
			         formatter: function () {
			            return this.value / 1000 + '  USDT';
			         }
			      }
			   };
			   var tooltip = {
			      pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
			   };
			   var plotOptions = {
			      area: {
			         pointStart: 0,2,3,
			         marker: {
			            enabled: false,
			            symbol: 'circle',
			            radius: 2,
			            states: {
			               hover: {
			                 enabled: true
			               }
			            }
			         }
			      }
			   };
			   var series= [{
			         name: 'USA',
			            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
			                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
			                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
			                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
			                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
			                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
			                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
			        }
			   ];     
			      
			   var json = {};   
			   json.chart = chart; 
			   json.title = title;   
			   json.subtitle = subtitle; 
			   json.tooltip = tooltip;
			   json.xAxis = xAxis;
			   json.yAxis = yAxis;  
			   json.series = series;
			   json.plotOptions = plotOptions;
			   $('#container').highcharts(json);
			  
			});
		</script>
		<script type="text/javascript">
			$(function(){
				$('.jyxinxi-li01').click(function(){
					$('.jyxinxi-li01').addClass('color-jyxx');
					$('.jyxinxi-li02').removeClass('color-jyxx');
					$('.jyxinxi-li03').removeClass('color-jyxx');
				});
				$('.jyxinxi-li02').click(function(){
					$('.jyxinxi-li02').addClass('color-jyxx');
					$('.jyxinxi-li01').removeClass('color-jyxx');
					$('.jyxinxi-li03').removeClass('color-jyxx');
				});
				$('.jyxinxi-li03').click(function(){
					$('.jyxinxi-li03').addClass('color-jyxx');
					$('.jyxinxi-li02').removeClass('color-jyxx');
					$('.jyxinxi-li01').removeClass('color-jyxx');
				});
			});
		</script>
	</body>

</html>